<div class="layui-fluid layui-anim febs-anim" id="febs-revocation" lay-title="撤销订单"
     xmlns:shiro="http://www.w3.org/1999/xhtml">
  <div class="layui-row febs-container">
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-body febs-table-full">
          <form class="layui-form layui-table-form" lay-filter="revocation-table-form">
            <div class="layui-row">
              <div class="layui-col-md10">
                <div class="layui-form-item">
                  <div class="layui-inline">
                    <label class="layui-form-label layui-form-label-sm">书籍名称</label>
                    <div class="layui-input-inline">
                      <input type="text" name="bookname" autocomplete="off" class="layui-input">
                    </div>
                  </div>
                  <div class="layui-inline">
                    <label class="layui-form-label layui-form-label-sm">年份</label>
                    <div class="layui-input-inline">
                      <input type="text" name="year" id="management-revocation-year" autocomplete="off"
                             class="layui-input">
                    </div>
                  </div>
                </div>
              </div>
              <div class="layui-col-md2 layui-col-sm12 layui-col-xs12 table-action-area">
                <div class="layui-btn layui-btn-sm layui-btn-primary table-action" id="query">
                  <i class="layui-icon">&#xe848;</i>
                </div>
                <div class="layui-btn layui-btn-sm layui-btn-primary table-action" id="reset">
                  <i class="layui-icon">&#xe79b;</i>
                </div>
                <div class="layui-btn layui-btn-sm layui-btn-primary table-action action-more"
                     shiro:hasAnyPermissions="revocation:view">
                  <i class="layui-icon">&#xe875;</i>
                </div>
              </div>
            </div>
          </form>
          <div class="mainboxx" id="box">
            <div class="column">
              <div class="panell bar">
                <div class="chart revocation"></div>
                <div class="panell-footer"></div>
              </div>
            </div>
          </div>
          <table lay-filter="revocationTable" lay-data="{id : 'revocationTable'}"></table>
          <script data-th-inline="none" type="text/javascript">
            var $ = layui.jquery;
            f4();

            function f4() {
              // 实例化对象
              var myChart4 = echarts.init(document.querySelector(".revocation"));
              // 指定配置和数据
              var option = {
                color: ["#2f89cf"],
                title: {
                  text: '撤销图书统计图',
                  left: 'left',
                  top: 6,
                  textStyle: {
                    color: '#ff4c25',
                    fontSize: 26
                  }
                },
                legend: {
                  width: 20
                },
                visualMap: {
                  itemWidth: 20,
                  itemHeight: 200
                },
                tooltip: {
                  trigger: "axis",
                },
                toolbox: {
                  show: true,
                  itemSize: 12,
                  feature: {
                    dataZoom: {
                      yAxisIndex: 'none'
                    },
                    dataView: {readOnly: false},
                    magicType: {type: ['line', 'bar']},
                    restore: {},
                    saveAsImage: {}
                  }
                },
                grid: {
                  left: "0%",
                  top: "40px",
                  right: "0%",
                  bottom: "4%",
                  containLabel: true
                },
                xAxis: [
                  {
                    type: "category",
                    data: [],
                    axisTick: {
                      show: false
                    },
                    axisLabel: {
                      interval: 0,
                      textStyle: {
                        color: "#02a6b5",
                        fontSize: "20"
                      }
                    },
                    axisLine: {
                      show: true
                    }
                  }
                ],
                yAxis: [
                  {
                    type: "value",
                    axisLabel: {
                      textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: "12"
                      }
                    },
                    axisLine: {
                      show: true,
                      lineStyle: {
                        color: "rgba(255,255,255,.1)",
                        width: 1,
                        type: "solid"
                      }
                    },
                    splitLine: {
                      lineStyle: {
                        color: "rgba(255,255,255,.1)"
                      }
                    },

                  }
                ],
                series: [
                  {
                    name: "直接访问",
                    type: "bar",
                    barWidth: "20%",
                    data: [],
                    itemStyle: {
                      barBorderRadius: 5
                    }
                  }
                ]
              };

              // 把配置给实例对象
              myChart4.setOption(option);
              window.addEventListener("resize", function () {
                myChart4.resize();
              });

              var bookname = [];    //类别数组（实际用来盛放X轴坐标值）
              var number = [];    //销量数组（实际用来盛放Y坐标值）

              d();

              function d() {
                $.ajax({
                  type: "get",
                  url: ctx + 'revocationStat/year',
                  dataType: 'JSON',
                  cache: false,
                  contentType: "application/json;charset=utf-8",
                  success: function (res) {
                    let data = res.data;
                    let set = new Set();
                    for (let i in data) {
                      bookname.push(data[i].bookname);
                      number.push(data[i].number);
                    }
                    myChart4.setOption({        //加载数据图表
                      xAxis: {
                        name: "种类",
                        data: bookname
                      },
                      series: [{
                        // 根据名字对应到相应的系列
                        data: number
                      }]
                    });
                  }
                });
                bookname.length = 0;
                number.length = 0;
              }
            }
          </script>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/html" id="revocation-optionOne" xmlns:shiro="http://www.w3.org/1999/xhtml">
  <span shiro:lacksPermission="revocation:no">
        <span class="layui-badge-dot febs-bg-orange"></span> 无权限
    </span>
  <a lay-event="no" shiro:hasPermission="revocation:no">
    <i class="layui-icon febs-edit-area febs-orange">&#x1006;</i></a>
</script>
<script data-th-inline="none" type="text/javascript">
  layui.use(['dropdown', 'jquery', 'laydate', 'form', 'table', 'febs', 'element'], function () {
    var $ = layui.jquery,
        laydate = layui.laydate,
        febs = layui.febs,
        form = layui.form,
        element = layui.element,
        table = layui.table,
        dropdown = layui.dropdown,
        $view = $('#febs-revocation'),
        $query = $view.find('#query'),
        $reset = $view.find('#reset'),
        $searchForm = $view.find('form'),
        sortObject = {field: 'year', type: null},
        tableIns;

    form.render();

    laydate.render({
      elem: '#management-revocation-year',
      type: 'year'
    });

    dropdown.render({
      elem: $view.find('.action-more'),
      click: function (name, elem, event) {
        var checkStatus = table.checkStatus('revocationTable');
        if (name === 'year') {
          $('#box').css({display: 'none'});
          initTable();
        }
        if (name === 'detail') {
          location.reload();
        }
        if (name === 'delete') {
          if (!checkStatus.data.length) {
            febs.alert.warn('请选择需要删除的记录');
          } else {
            febs.modal.confirm('删除信息', '确定删除该条？', function () {
              var revocationIds = [];
              layui.each(checkStatus.data, function (key, item) {
                revocationIds.push(item.id)
              });
              deleterevocations(revocationIds.join(','));
            });
          }
        }
      },
      options: [{
        name: 'year',
        title: '年份统计',
        perms: 'revocation:view',
      }, {
        name: 'detail',
        title: '统计图表',
        perms: 'revocation:view',
      }]
    });

    table.on('sort(revocationTable)', function (obj) {
      sortObject = obj;
      tableIns.reload({
        initSort: obj,
        where: $.extend(getQueryParams(), {
          field: obj.field,
          order: obj.type
        })
      });
    });

    $query.on('click', function () {
      var params = $.extend(getQueryParams(), {field: sortObject.field, order: sortObject.type});
      tableIns.reload({where: params, page: {curr: 1}});
    });

    $reset.on('click', function () {
      $searchForm[0].reset();
      tableIns.reload({where: getQueryParams(), page: {curr: 1}, initSort: sortObject});
    });

    function initTable() {
      tableIns = febs.table.init({
        elem: $view.find('table'),
        id: 'revocationTable',
        url: ctx + 'revocation/list',
        cols: [[
          {type: 'checkbox'},
          {title: '书名', field: 'bookname'},
          {title: '出版社', field: 'pubid'},
          {field: 'bookmoney', title: '价格'},
          {field: 'booktype', title: '图书类型'},
          {field: 'number', title: '撤销次数'},
          {title: '年份', field: 'year', sort: true},
        ]]
      });
    }

    function getQueryParams() {
      return {
        bookname: $searchForm.find('input[name="bookname"]').val(),
        year: $searchForm.find('input[name="year"]').val()
      };
    }
  })
</script>
<style>